@class-prefix-popup: ~'adm-popup';

.@{class-prefix-popup} {
  &-hidden {
    display: none;
  }
  position: fixed;
  z-index: var(--adm-z-index-popup);
}

.@{class-prefix-popup}-body {
  position: fixed;
  background-color: #ffffff;
  z-index: calc(var(--adm-z-index-mask) + 10);

  --transform-active: none;

  &-position-bottom {
    width: 100%;
    bottom: 0;
    left: 0;
    --transform-non-active: translate(0, 100%);
  }
  &-position-top {
    width: 100%;
    top: 0;
    left: 0;
    --transform-non-active: translate(0, -100%);
  }
  &-position-left {
    height: 100%;
    top: 0;
    left: 0;
    --transform-non-active: translate(-100%, 0);
  }
  &-position-right {
    height: 100%;
    top: 0;
    right: 0;
    --transform-non-active: translate(100%, 0);
  }

  &-hidden {
    transform: var(--transform-non-active);
  }

  &-enter {
    transform: var(--transform-non-active);
  }

  &-enter-active {
    transform: var(--transform-active);
    transition: transform 200ms ease-out;
  }

  &-enter-done {
    transform: var(--transform-active);
  }

  &-exit {
    transform: var(--transform-active);
  }

  &-exit-active {
    transform: var(--transform-non-active);
    transition: transform 200ms;
  }
}
